<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="隐藏">
<input type="button" value="显示">
<input type="button" value="淡出">
<input type="button" value="淡入">
<input type="button" value="上滑">
<input type="button" value="下滑">
<input type="button" value="自定义">
<hr>
<img src="../ming.jpg" width="500" alt="">
<script src="../jq.js"></script>
<script>
    //给所有按钮添加点击事件
    //第一个参数是动画持续时间，第二个参数是方法(动画做完后执行)
    $("input:eq(0)").click(function () {
        $("img").hide(3000, function () {
            alert("啦啦啦")
        })
    })
    $("input:eq(1)").click(function () {
        $("img").show(3000)
    })
    $("input:eq(2)").click(function () {//淡出
        $("img").fadeOut(3000)
    })
    $("input:eq(3)").click(function () {//淡入
        $("img").fadeIn(3000)
    })
    $("input:eq(4)").click(function () {//上滑
        $("img").slideUp(3000)
    })
    $("input:eq(5)").click(function () {//下滑
        $("img").slideDown(3000)
    })
    $("input:eq(6)").click(function () {
        //修改元素的样式 为相对定位
        $("img").css("position", "relative");
        //自定义动画
        $("img").animate({"left": "200px"}, 1000)
            .animate({"top": "200px"}, 1000)
            .animate({"left": "0px"}, 1000)
            .animate({"top": "0px"}, 1000)
            .animate({"width": "200px"}, 1000)
            .animate({"width": "500px"}, 1000)
    })

</script>
</body>
</html>